<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
        <?php echo $article['title']; ?>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Zhigang Song">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/asset/css/main.css" type="text/css">

    <link rel="stylesheet" href="/asset/css/article.css" type="text/css">

    <!-- Fonts -->
    <link href='//fonts.useso.com/css?family=Merriweather:900,900italic,300,300italic' rel='stylesheet' type='text/css'>
    <link href='//fonts.useso.com/css?family=Lato:900,300' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="/asset/vendor/prettify/prettify.css" type="text/css">
    <script type="text/javascript">
        window.require = {
            baseUrl: "/asset/js",
            deps: ['article']
        };
    </script>
    <script type="text/javascript" src="/asset/vendor/require.js"></script>
</head>

<body class="">
    <div class="site-wrap">

        <?php include(dirname(__DIR__) . '/header.php'); ?>

            <div class="post p2 p-responsive wrap" role="main">
                <div class="measure">
                    <div class="home">

                        <div class="posts">

                            <div class="post">
                                <p class="post-meta">by <?php echo $article['author']; ?> at <?php echo $article['modified']; ?></p>
                                <p class="post-summary" id="article-content"><?php echo $article['content']; ?></p>
                            </div>

                        </div>
                        <!-- end .posts -->

                        <div class="pagination clearfix mb1 mt4">
                            <div class="left">
                                <?php
								$route = array('c' => 'article', 'a' => 'index', 'm' => 'home');
								if ($article['prev']) {
									$url = url(array('id' => $article['prev']), $route);
									echo "<a href='$url' class='pagination-item'>Older</a>";
								} else {
									echo "<span class='pagination-item disabled'>Older</span>";
								}
								?>
                            </div>
                            <div class="right">
                                <?php
								if ($article['next']) {
									$url = url(array('id' => $article['next']), $route);
									echo "<a href='$url' class='pagination-item'>Newer</a>";
								} else {
									echo "<span class='pagination-item disabled'>Newer</span>";
								}
								?>
                            </div>
                        </div>

                        <div class="comments">
                            <div class="page-header">
                                <h2>Comment List</h2>
                            </div>
                            <div class="comment">
<ul>
<?php
                                foreach ($comment as $c) {
                                    echo "<li class='comment-item'>";
                                    echo "<p><span class='comment-user'>{$c['author']}</span><span class='comment-time'>{$c['time']}</span></p>";
                                    echo "<p class='comment-content'>{$c['content']}</p>";
                                    echo "</li>";
                                }
?>
</ul>
                            </div>

                        </div><!-- end .comments -->

                        <div class="leave-comments">
                            <div class="page-header">
                                <h2>Say Something ...</h2>
                            </div>
                            <form action="<?php echo route('comment', 'comment'); ?>" method="POST" class="form-stacked form-light">
                                <input type="hidden" name="article" value="<?php echo $article['id'];?>" />
                                <input type="text" name="cuser" class="input mobile-block" placeholder="Your Name Here">
                                <textarea type="text" name="content" class="input mobile-block" rows="5" placeholder="What would you like to say?"></textarea>
                                <input type="submit" class="button button-blue mobile-block" value="Submit">
                            </form>

                        </div><!-- end of .mk-comments -->
                    </div><!-- end of .home -->

                </div><!-- end of .measure -->
            </div><!-- end of .post -->
    </div><!-- end of .site-wrap -->

    <?php include(dirname(__DIR__) . '/footer.php'); ?>
</body>

</html>
